<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能宠物管家</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script rel="stylesheet" src="./js/jquery-3.7.1.min.js"></script>
    <script rel="stylesheet" src="./js/bootstrap.bundle.js"></script>
    <script>
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
    </script>
    <style>
        /* 搜索框 */
        #search-input:focus~#search-suggestion {
            display: block !important;
            border: 2px solid #636466 !important;
            border-top: 0 !important;
        }

        #search-input:hover {
            border: 2px solid #636466 !important;
        }

        /* 巨幕 */
        .jumbotron {
            background: url(./img/巨幕1.png) no-repeat center;
            border-radius: 0;
            height: 320px;
        }

        .jumbotron h2 {
            font-weight: 900;
            letter-spacing: 0.8rem;
            margin-bottom: 1rem;
        }

        .jumbotron p {
            letter-spacing: 0.8rem;
            margin-bottom: 1rem;
        }

        .jumbotron button:hover {
            background-color: #c3c3c4;
            color: #fffefe;
        }

        /* 卡片 */
        .app-card {
            background-color: rgb(255, 255, 255);
            margin: 8px;
            border-radius: 0.25rem;
            box-shadow: 2px 3px 6px 3px #eceaea;
        }

        .app-card:hover {
            transform: scale(1.05);
            transition: all 0.4s ease-in-out;
        }

        .app-card p {
            margin: 12px;
            color: #a7a4a4;
            margin-bottom: 10px !important;
        }

        .app-card i {
            font-size: large;
            color: #1a49a9;
        }

        @media(min-width: 576px) {
            .modal-dialog {
                max-width: 800px;
                margin: 1.75rem auto;
            }
        }

        /* 轮播 */
        #carouselExampleIndicators .carousel-indicators {
            background-color: rgba(228, 226, 226, 0.548);
            padding: 0 5px;
            bottom: -280px;
            width: auto;
            margin-right: 90px;
            position: relative;
        }

        #carouselExampleIndicators .carousel-indicators li {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        #carouselExampleIndicators .carousel-control-prev,
        #carouselExampleIndicators .carousel-control-next {
            background-color: rgba(200, 200, 200, 0.5);
            width: 2%;
            height: 40px;
            margin-top: 100px;
            transition: background-color 0.3s;
        }

        /* 尾巴 */
        .footer a {
            color: #d8d5d5;
            text-decoration: none;
        }

        .footer a:hover {
            color: #fff;
        }
    </style>

<body>
    <!-- 头部导航 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ffffff;">
        <!-- 智能宠物管家LOGO -->
        <a class="navbar-brand" href="#">
            <img src="./img/logo1.jpg" width="40" height="40" alt="">
        </a>
        <!-- 缩小画面后 略缩按钮 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 头部 -->
        <div class="collapse navbar-collapse" style="background-color: #ffffff;" id="navbarSupportedContent">
            <div class="container-fluid d-flex justify-content-between align-items-center">
                <!-- 左侧：搜索框 -->
                <div class="input-group ml-2" style="width: 300px;">
                    <!-- 搜索框 -->
                    <input id="search-input" type="text" class="form-control"
                        style="box-shadow:none; border-radius: 10px 0 0 10px; border: 2px solid #c4c7ce; "
                        placeholder="搜索">
                    <!-- 下拉框 -->
                    <div id="search-suggestion" class="d-none position-absolute border border-light rounded bg-white"
                        style="top: 36px; z-index: 999;right: 40px;width: 260px;">
                        <ul class="list-inline border-top p-1 text-left">
                            <li class="mt-2"><a class="text-dark">核心功能</a></li>
                            <li class="mt-3"><a class="text-dark">出行管理</a></li>
                            <li class="mt-3"><a class="text-dark">健康监护</a></li>
                        </ul>
                    </div>
                    <!-- 字体符号1 问号 -->
                    <div class="input-group-append">
                        <button class="btn btn-outline-dark" type="button" id="basic-addon2" style="height: 37px;">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
                <!-- 右侧：导航菜单 + 按钮 -->
                <div class="d-flex align-items-center">
                    <ul class="list-inline p-0 m-0">
                        <li class="list-inline-item py-1 px-2"><a href="#health-monitoring" class="text-dark">健康监护</a>
                        </li>
                        <li class="list-inline-item py-1 px-2"><a href="#cleaning" class="text-dark">清洁护理</a></li>
                        <li class="list-inline-item py-1 px-2"><a href="./饮食照料.html" target="_blank"
                                class="text-dark">饮食照料</a></li>
                        <li class="list-inline-item py-1 px-2"><a href="#social" class="text-dark">社交互动</a></li>
                        <li class="list-inline-item py-1 px-2"><a href="#travel-management" class="text-dark">出行管理</a>
                        </li>
                        <li class="nav-item dropdown list-inline-item py-1 px-2">
                            <a class="nav-link dropdown-toggle text-dark" href="#" role="button" data-toggle="dropdown"
                                aria-expanded="false">
                                智能陪玩
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">远程视频互动</a>
                                <a class="dropdown-item" href="#">智能玩具控制</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">AR虚拟陪伴</a>
                            </div>
                        </li>
                    </ul>
                    <!-- 按钮 -->
                    <ul class="list-unstyled d-flex align-items-center m-0 p-0">
                        <li class="mx-2"><a href="#loginModal" class="btn btn-primary btn-sm py-0 m-0"
                                data-toggle="modal">登录</a>
                        </li>
                        <li class="mx-2"><a href="" class="btn btn-light btn-sm py-0 m-0">联系我们</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 巨幕 -->
    <div class="jumbotron text-white">
        <div class="container">
            <h2>智能宠物管家</h2>
            <p>为您的宠物提供全方位智能照护，让爱宠生活更轻松快乐</p>
            <button type="button" class="btn btn-light w-25 mt-3" data-container="body" data-toggle="popover"
                data-trigger="hover" data-placement="bottom" data-content="请先下载智能宠物管家APP" data-html="true">
                立即体验
            </button>
        </div>
    </div>

    <!-- 模态框 -> 登录 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="width: 800px;margin-right: 400px;">
                <!-- 主体 -->
                <div class="modal-body p-4">
                    <!-- 关闭图标 -->
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <!-- 左侧二维码 + 右侧登录切换 -->
                    <div class="row">
                        <!-- 左侧二维码登录 -->
                        <div class="col">
                            <!-- 智能宠物管家LOGO -->
                            <img width="38" src="./img/logo1.jpg" alt="">
                            <!-- 二维码 + 手机扫码 -->
                            <div class="row mt-5">
                                <!-- 微信二维码 -->
                                <div class="col">
                                    <img class="img-thumbnail p-1" src="./img/微信二维码.png" alt="">
                                </div>
                                <!-- 淘宝二维码 -->
                                <div class="col">
                                    <img class="img-fluid p-2" src="./img/淘宝二维码.png" alt="">
                                </div>
                            </div>
                            <!-- 文字+下拉框 -->
                            <div class="col text-center mt-2">
                                <!-- 文字 -->
                                <h5>请使用微信/淘宝扫码登陆</h5>
                                <!-- 图标超链接 -->
                                <div class="dropdown">
                                    <a class="bg-light rounded" style="padding: 5px 15px;" href="">
                                        <img class="rounded" style="width: 20px; height: 21px;" src="./img/淘宝APP.png"
                                            alt="">
                                        淘宝购买</a>
                                    <!-- 下拉框 -->
                                    <div class="dropdown-menu" style="width: 400px;height: 400px;">
                                        <!-- 下拉框 -->
                                        <img class="py-2 mt-4 mb-3 border"
                                            style="width: 300px;height: 300px;margin-left: 50px;" src="./img/淘宝二维码.png"
                                            alt="">
                                        <h4 class="text-center">扫描二维码购买智能宠物管家</h4>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 右侧登录导航切换 -->
                        <div class="col">
                            <!-- 右侧 账号登陆/短信登陆 -->
                            <ul class="nav nav-pills my-pills" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home"
                                        type="button">账号登陆</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile"
                                        type="button">短信登陆</button>
                                </li>

                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content mt-3">
                                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <form action="" class="was-validated">
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入账号/邮箱"
                                                required>
                                            <div class="invalid-feedback">请输入正确的邮箱</div>
                                            <div class="valid-feedback">验证通过</div>
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" pattern="[A-Za-z0-9S]{6,30}"
                                                class="form-control" placeholder="请输入密码" required>
                                            <div class="invalid-feedback">请输入正确密码，长度大于6</div>
                                            <div class="valid-feedback">验证通过</div>
                                        </div>
                                        <div class="form-group text-right">
                                            <a href="">忘记密码?</a>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 遵守智能宠物管家用户协议和隐私政策
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <form action="">
                                        <div class="form-group small text-muted">
                                            验证即登录，未注册将自动创建智能宠物管家账号
                                        </div>
                                        <div class="form-group was-validated">
                                            <input type="text" name="" id="" pattern="^1[3456789]\d{9}$"
                                                class="form-control" placeholder="请输入手机号" required>
                                            <div class="invalid-feedback">请输入有效的手机号</div>
                                            <div class="valid-feedback">验证通过</div>
                                        </div>
                                        <div class="form-group position-relative">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入验证码">
                                            <a class="position-absolute border-left px-2"
                                                style="right: 5px; top:5px">获取验证码</a>
                                        </div>

                                        <div class="form-group mt-5">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 遵守智能宠物管家用户协议和隐私政策
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 尾巴 -->
                <div class="modal-footer justify-content-between">
                    <!-- 其他注册方式（超链接） -->
                    <div>
                        <!-- 淘宝 -->
                        <a href="">
                            <img width="28" style="border-radius: 13px;" src="./img/淘宝APP.png" alt="">
                        </a>
                        <!-- weibo -->
                        <a href="">
                            <img width="28" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png" alt="">
                        </a>
                        <!-- wechat -->
                        <a href="">
                            <img width="28" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png" alt="">
                        </a>
                    </div>
                    <a href="./注册界面.html" target="_blank">立即注册</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mb-5">
        <!-- 核心功能 + 卡片】 -->
        <h2 class="text-center mb-4"><b>核心功能</b></h2>
        <div class="row">
            <!-- 卡片1 -->
            <div class="col-12 col-xs-12 col-md-6 col-xl-4">
                <div class="app-card">
                    <img class="img-rounded mt-2 ml-3" style="width: 48px;height: 48px;border-radius: 8px;"
                        src="./img/健康监护.png" alt="">
                    <h4 class="m-3"><b>健康监护管理</b></h4>
                    <p>实时监测宠物体征数据,智能分析健康状况,及时预警异常情况</p>
                    <p><i class="bi bi-check" style="color: rgb(79 70 229 / var(--tw-text-opacity, 1));"></i>24小时体征监测
                    </p>
                    <p><i class="bi bi-check" style="color: rgb(79 70 229 / var(--tw-text-opacity, 1));"></i>智能用药提醒</p>
                    <p><i class="bi bi-check" style="color: rgb(79 70 229 / var(--tw-text-opacity, 1));"></i>异常预警</p>
                </div>
            </div>

            <!-- 卡片2 -->
            <div class="col-12 col-xs-12 col-md-6 col-xl-4">
                <div class="app-card">
                    <img class="img-rounded mt-2 ml-3" style="width: 48px;height: 48px;border-radius: 8px;"
                        src="./img/智能陪玩.png" alt="">
                    <h4 class="m-3"><b>智能陪玩互动</b></h4>
                    <p>远程互动、语音安抚、AR 虚拟互动，让宠物不再孤单</p>
                    <p><i class="bi bi-check" style="color:rgb(16 185 129 / var(--tw-text-opacity, 1));"></i>远程视频互动</p>
                    <p><i class="bi bi-check" style="color:rgb(16 185 129 / var(--tw-text-opacity, 1));"></i>智能玩具控制</p>
                    <p><i class="bi bi-check" style="color:rgb(16 185 129 / var(--tw-text-opacity, 1));"></i>AR 虚拟陪伴</p>
                </div>
            </div>

            <!-- 卡片3 -->
            <div class="col-12 col-xs-12 col-md-6 col-xl-4">
                <div class="app-card">
                    <img class="img-rounded mt-2 ml-3" style="width: 48px;height: 48px;border-radius: 8px;"
                        src="./img/饮食照料.png" alt="">
                    <h4 class="m-3"><b>饮食照料</b></h4>
                    <p>智能投喂系统，定时定量供应食物和水，保证营养均衡</p>
                    <p><i class="bi bi-check"></i>自动投喂</p>
                    <p><i class="bi bi-check"></i>营养分析</p>
                    <p><i class="bi bi-check"></i>智能补给</p>
                </div>
            </div>
        </div>
        <!-- 健康监护 + 轮播 -->
        <h2 class="text-center mb-4 mt-5" id="health-monitoring"><b>健康监护</b></h2>
        <div class="row">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./img/健康监测1.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/健康监护2.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/健康监测3.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/健康监测4.png" class="d-block w-100" alt="...">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
                    data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
                    data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>
        </div>
        <!-- 智能清洁系统 + 列表 -->
        <h2 class="text-center mb-4 mt-5" id="cleaning"><b>智能清洁系统</b></h2>
        <div class="row d-flex align-items-center justify-content-center">
            <!-- 第一列 -->
            <div class="col-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <h5>
                            <i class="bi bi-trash3-fill" style="color: rgb(111, 160, 225);"></i>
                            自动清理
                        </h5>
                        <p>智能识别并清理排泄物，保持环境卫生</p>
                    </li>
                    <li class="list-group-item">
                        <h5>
                            <i class="bi bi-droplet-fill" style="color: rgb(89, 210, 170);"></i>
                            消毒除味
                        </h5>
                        <p>定期消毒，祛除异味，营造健康环境</p>
                    </li>
                    <li class="list-group-item">
                        <h5>
                            <i class="bi bi-scissors" style="color: mediumpurple;"></i>
                            美容护理
                        </h5>
                        <p>专业美容服务，让爱宠保持整洁清新</p>
                    </li>
                </ul>
            </div>
            <!-- 第二列 -->
            <div class="col-6">
                <ul class="list-group list-group-flush ml-5">
                    <li class="list-group-item">
                        <h5>
                            <i class="bi bi-airplane-engines-fill" style="color: rgb(159, 204, 219);"></i>
                            宠物用品护理
                        </h5>
                        <p>针对宠物窝垫、玩具，开发[柔性清洁模式]</p>
                    </li>
                    <li class="list-group-item">
                        <h5>
                            <i class="bi bi-cloud-fill" style="color:rgb(226, 90, 90);"></i>
                            健康预警关联
                        </h5>
                        <p>清洁系统数据联动健康监护预警</p>
                    </li>
                    <li class="list-group-item">
                        <h5>
                            <i class="bi bi-paperclip"></i>
                            耗材智能管家
                        </h5>
                        <p>智能预测耗材周期+订阅配送解放采购</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 出行管理 + 卡片 -->
        <h2 class="text-center mb-4 mt-5" id="travel-management"><b>出行管理</b></h2>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="row">
                        <div class="col-md-5">
                            <h5 class="card-title mt-2 ml-3"><b>实时定位</b></h5>
                            <img src="./img/地图.png" class="img-fluid rounded ml-3 mb-2">
                        </div>
                        <div class="col-md-7">
                            <h5 class="card-title mt-2 ml-3"><b>遛宠计划</b></h5>
                            <!-- 一号路线 -->
                            <div class="mt-2 ml-3 mr-3 bg-light" style="border-radius: 8px;">
                                <div class="d-flex justify-content-between">
                                    <p class="card-text m-2">今日路线</p>
                                    <p class="card-text m-2" style="color: mediumpurple;">1.9公里</p>
                                </div>
                                <p class="mt-0 ml-2" style="font-size: 14px;color: #6c6d6d;">
                                    武汉软件工程职业学院【西二门】
                                    <i class="bi bi-arrow-right"></i>
                                    中百仓储(紫微星广场店)
                                    <i class="bi bi-arrow-right"></i>
                                    江夏藏龙岛科技园研发综合大楼
                                </p>
                            </div>
                            <!-- 二号路线 -->
                            <div class="mt-2 ml-3 mr-3 bg-light" style="border-radius: 8px;">
                                <div class="d-flex justify-content-between">
                                    <p class="card-text m-2">活动建议</p>
                                    <p class="card-text m-2" style="color: rgb(119, 214, 138);">适宜运动</p>
                                </div>
                                <p class="mt-0 ml-2" style="font-size: 14px;color: #6c6d6d;">
                                    天气晴朗，室外能见度高，适宜户外运动，请注意防晒哦！
                                </p>
                            </div>
                            <p class="card-text ml-3 mr-3">
                                <small class="text-muted">最后一次更新 23 分钟前</small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 社交互动 + 媒体对象 -->
        <h2 class="text-center mb-4 mt-5" id="social"><b>社交互动</b></h2>
        <div class="row">
            <ul class="list-unstyled">
                <li class="media bg-light">
                    <img src="./img/社交互动1.png" class="mr-3" style="width: 64px;height: 64px;" alt="...">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1">沉浸式互动玩法</h5>
                        <p>开发 “宠物云派对” 功能，多只宠物可通过设备摄像头、麦克风，实现实时视频互动玩耍，系统模拟宠物熟悉的互动音效（如猫叫、狗吠回应）、虚拟玩具投掷（激光点、虚拟小球等），营造线下玩耍氛围。
                        </p>
                        <p>推出 “宠物社交任务”，如 “萌宠接力挑战”（模仿指定动作、完成趣味障碍）、“跨城宠物交友打卡”（到合作宠物友好门店签到互动），完成任务可解锁虚拟成就、实物奖励（如宠物零食、定制周边
                            ），提升互动积极性。</p>
                    </div>
                </li>
                <li class="media my-4">
                    <img src="./img/社交互动2.png" class="mr-3" style="width: 64px;height: 64px;" alt="...">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1">宠物社交"成就"里程碑</h5>
                        <p>设置「社交里程碑」—— 宠物累计交到 10 个好友、完成 5 次跨城互动、解锁新技能并通过社交平台认证等，可获得虚拟勋章（如「社交达人」「技能大师」
                            ），积累勋章兑换线下宠物活动门票（萌宠运动会、宠物行为训练课 ）、品牌新品体验资格，让社交互动更具目标感和获得感。</p>
                    </div>
                </li>
                <li class="media bg-light">
                    <img src="./img/社交互动3.png" style="width: 64px;height: 64px;" class="mr-3" alt="...">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1">宠物公益联动</h5>
                        <p>在社交平台开设「流浪宠物互助专区」，用户可通过设备上传「社区流浪宠物动态」（拍摄到的流浪猫 / 狗活动画面、健康状态 ），系统 AI
                            识别品种、大致年龄，联动当地救助机构匹配救助方案；同时发起「虚拟领养日」，救助机构上传待领养宠物的「数字档案」（包含清洁系统记录的健康数据、社交互动模拟视频
                            ），方便意向领养人远程了解、预约线下接触，用科技助力流浪宠物找家。</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 尾巴 -->
    <footer class="footer bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h4 class="mt-4"><b>智能宠物管家</b></h4>
                    <p style="color: #d8d5d5;">为您的宠物提供全方位智能照护，让爱宠生活更轻松快乐。</p>
                    <a href=""><i class="bi bi-tencent-qq mr-2"></i></a>
                    <a href=""><i class="bi bi-sina-weibo mr-2"></i></a>
                    <a href=""><i class="bi bi-wechat mr-2"></i></a>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h5 class="mt-4"><b>快速链接</b></h5>
                    <p><a href="#" class="">首页</a></p>
                    <p><a href="#travel-management">出行管理</a></p>
                    <p><a href="./饮食照料.html" target="_blank">饮食照料</a></p>
                    <p><a href="#health-monitoring">健康监护</a></p>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h5 class="mt-4"><b>客服服务</b></h5>
                    <p><a href="#" class="">帮助中心</a></p>
                    <p><a href="#">联系我们</a></p>
                    <p><a href="#">退换货政策</a></p>
                    <p><a href="#">配送说明</a></p>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h5 class="mt-4"><b>联系我们</b></h5>
                    <p><a href="#"><i class="bi bi-geo-alt-fill mr-2"></i>武汉市江夏区光谷</a></p>
                    <p><a href="#"><i class="bi bi-telephone-fill mr-2"></i>400-888-8888</a></p>
                    <p><a href="#"><i class="bi bi-envelope-fill mr-2"></i>service@Intelligent Pet Butler.com</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-xs-12">
                    <p class="text-center" style="color: #c4c7ce;">© 2021-2022 Intelligent Pet Butler. All Rights
                        Reserved.</p>
                </div>
    </footer>

</body>

</html>
</body>

</html>